<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../../bin/dataHelper.js"></script>
  <style type="text/css">
    .container {
      padding: 10px;
      margin: 10px;
      width: 700px;
      height: auto;
      min-height: 100px;
    }

    .red {
      border: 1px solid red;
    }

    .blue {
      border: 1px solid blue;
    }

    .green {
      border: 1px solid green;
    }
  </style>
</head>

<body>
  <div class="container red">
    <div>
      捍卫农村妇女儿童人身权利，国家一直在行动。近日，2022年中央一号文件强调，依法严厉打击农村黄赌毒和侵害农村妇女儿童人身权利的违法犯罪行为。
      <br>
      严厉打击侵害农村妇女儿童人身权利的违法犯罪行为，深得人心，意义深远，备受好评。实际上，此前的中央一号文件也有类似表述，比如2020年的中央一号文件指出，严厉打击非法侵占农村集体资产、扶贫惠农资金和侵犯农村妇女儿童人身权利等违法犯罪行为。不仅仅中央一号文件，“十四五”规划纲要也提出提高对留守妇女等特殊群体的关爱服务，严厉打击侵害妇女和儿童人身权利的犯罪行为。
    </div>
  </div>
  <div class="container blue">
    <div>评论：</div>
    <br>
    <div id="divFather"></div>
  </div>
  <div class="container green">
    <div>
      <textarea row="6" id="input"></textarea>
    </div>
    <div>
      <button onClick="add()">发表评论</button>
    </div>
  </div>
</body>

<script type="text/javascript">
  let txtComm = document.getElementById("input");
  let divFather = document.getElementById("divFather")
  let db = new DataHelper("plData", "id");
  //初始加载
  window.onload = function () {
    let arr = db.readData();
    console.log("arr", arr)
    for (let ele of arr) {
      makeDiv(ele.id, ele.content)
    }
  }
  //添加评论
  function add() {
    console.log("save data ")
    let steComm = txtComm.value;
    console.log(steComm)
    let id = db.addData(steComm)

    makeDiv(id, steComm)
  }
  //创建评论内容
  function makeDiv(id, content) {
    console.log(`id:${id}, content:${content}`)
    let divObj = document.createElement("div");
    divObj.innerHTML = content; //塞入 评论内容
    divFather.appendChild(divObj); //插入评论区内容
    //创建关闭按钮
    let spanObj = document.createElement("span");
    spanObj.innerHTML = "X";

    //id塞入关闭按钮内
    spanObj.setAttribute("plid", id);
    spanObj.onclick = remove; //添加点击事件 删除评论
    divObj.appendChild(spanObj);
  }

  function remove(e) {
    console.log("e", e)
    if (!confirm("您确认要删除吗？")) {
      return false
    }
    let btnDel = e.srcElement;
    // console.log("btnDel", btnDel)
    let conDiv = btnDel.parentNode;
    conDiv.parentNode.removeChild(conDiv); //删除当前元素
    let id = btnDel.getAttribute("plid");
    db.removeDataById(id);
  }
</script>

</html>